<template>
	<div style="background-color: #324157;width: 100%;height: 50px;position: relative">
        <ul class="nav" v-if="!isMobile">
			<template v-for="(item,index) in menuList">
				<li :key="index" style="padding-left: 10px;">
					<h5><i :class="item.icon" style="padding-right: 3px;padding-left: 5px;"></i>{{item.menuname}}</h5>
					<ul>
						<template v-for="(item2, index2) in item.Children">
							<li :key="index2">
								<h5 @click="showMenu(item2.linkUrl,item2.orderId,item2.menuname)"><i style="padding-right: 3px;padding-left: 5px;" :class="item2.icon"></i>{{item2.menuname}}</h5>
								<ul>
									<template v-for="(item3, index3) in item2.Children">
										<li :key="index3">
											<h5 @click="showMenu(item3.linkUrl,item3.orderId,item3.menuname)"><i style="padding-right: 3px;padding-left: 5px;" :class="item3.icon"></i>{{item3.menuname}}</h5>
										</li>
									</template>
								</ul>
							</li>
						</template>
					</ul>
				</li>
			</template>
		</ul>
        <div class="menuBtn" v-else>
            <i class="el-icon-menu" @click="openMenus"></i>
            <el-drawer
                title="我是标题"
                :modal="true"
                :append-to-body="true"
                :visible.sync="menuShow"
                direction="ttb"
                :with-header="false">
                <el-collapse v-model="activeName1" style="margin: 10px;">
                    <el-collapse-item :title="item.menuname" :name="index" v-for="(item, index) in menuList" :key="index">
                        <template v-for="(item2, index2) in item.Children">
                            <template v-if="item2.Children && item2.Children.length > 0">
                                <el-collapse v-model="activeName2" :key="index2" style="margin: 10px;">
                                    <el-collapse-item :title="item2.menuname" :name="index2">                     
                                        <div class="nav_item" v-for="(item3, index3) in item2.Children" :key="index3">
                                            <h5  @click="showMenu(item3.linkUrl,item3.orderId,item3.menuname)"><i :class="item3.icon" style="padding-right: 3px;padding-left: 5px;"></i>{{item3.menuname}}</h5>
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>
                            </template>
                            <template v-else>
                                <div class="nav_item" :key="index2">
                                    <h5  @click="showMenu(item2.linkUrl,item2.orderId,item2.menuname)"><i :class="item2.icon" style="padding-right: 3px;padding-left: 5px;"></i>{{item2.menuname}}</h5>
                                </div>
                            </template>
                        </template>
                    </el-collapse-item>
                </el-collapse>
            </el-drawer>
        </div>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				menuList:[],
                activeName1: [],
                activeName2: [],
                activeName3: [],
                menuShow: false
			}
		},
		props: {
			menuObject: {
				type:Object,
				default:{}
			}
		},
		methods: {
            openMenus(){
                this.menuShow = true
            },
			showMenu(LinkUrl,Id,Name) {
				if(LinkUrl != ''){
					if(LinkUrl == 'DeviceDataStatistic'){
						window.open(localHost + '/home.html#/Device');
					}else if(LinkUrl == 'LibraryDataStatistic') {
						window.open(localHost + '/home.html#/Library');
					}else if(LinkUrl == 'CirculateDataStatistic'){
						window.open(localHost + '/home.html#/Circulate');
					}else {
						this.$emit('changeView', LinkUrl+';'+Id+';'+Name);
					}
                    this.menuShow = false
				}	
			},
			updateMenu(){
				this.menuList = this.menuObject.item;
			}
		},
		created() {
			this.updateMenu();
			this.$nextTick(function() {
				$("ul.nav li").hover(
					function() {
						$(this).addClass("on");
					},
					function() {
						$(this).removeClass("on");
					}
					)
				$("ul.nav li").hover(
					function() {
						$(this).parent("ul").siblings("h5").addClass("choice");
					},
					function() {
						$(this).parent("ul").siblings("h5").removeClass("choice");
					}
					)

				if($("ul.nav li").find("ul").html() != "") {
					$("ul.nav li").parent("ul").siblings("h5").append("<span class='sub'></span>");
				}
			});
		}
	}
</script>
<style scoped>
	@import '../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style>
	/*@media screen and (min-width: 1300px){

	}*/
	.nav{ 
		display: flex;
		margin-top: 5px;
		width: 1200px;	
		height: 40px;
		/*background-color: #324157;*/
		position: absolute;
		z-index: 100;
		box-sizing:border-box;
		padding-left: 160px;
	}
    .menuBtn{
        text-align: right;
        padding: 4px 10px;
        font-size: 32px;
		color: #EEF1F6;
    }
    .nav_item{
        background: #324157;
		color: #EEF1F6;
        white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		height: 40px;
		line-height: 40px;
    }
	
	li {
		list-style: none;
		cursor: pointer;
	}
	
	ul.nav li {
	/*	white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;*/
		width: 110px;
		text-align: left;
	}
	
	ul.nav>li {
		float: left;
	}
	
	ul.nav li h5 {
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		height: 40px;
		line-height: 40px;
		border-bottom: 4px solid #324157;
	}
	
	ul.nav>li>h5 {
		background: #324157;
		color: #EEF1F6;
	}
	
	ul.nav>li>ul>li h5 {
		background: #324157;
		color: #EEF1F6;
	}
	ul.nav>li h5:hover,
	.choice {
		/*background: #20A0FF!important;*/
		border-bottom: 4px solid #20A0FF!important;
	}
	
	ul>li>ul {
		display: none;
	}
	
	ul>li.on>ul {
		display: block;
	}
	
	ul.nav li {
		position: relative;
	}
	
	ul.nav>li>ul>li ul {
		position: absolute;
		top: 0;
		right: -110px;
	}
	
	ul.nav span.sub {
		position: absolute;
		display: block;
		right: 15px;
		top: 0;
		width: 5px;
		height: 40px;
		background: url(../assets/images/arrows.png) no-repeat center center;
	}
</style>